<template>
  <div class="user clearfix">
    <div class="left">
      <div class="tou clearfix">
        <div class="img">
          <img :src="icon" id="div1" />
        </div>
        <div>{{ uname }}</div>
      </div>
      <div class="pers" @click="zl">
        <div class="gr">
          <img src="../assets/gr.png" alt="" />
          <span>个人资料</span>
        </div>
      </div>
      <div class="pers" @click="xg">
        <div class="gr">
          <img src="../assets/xg.png" alt="" />
          <span>修改密码</span>
        </div>
      </div>
    </div>
    <div class="right">
      <div v-if="active">
        <div class="gr">
          <img src="../assets/gr.png" alt="" />
          <span>个人资料</span>
        </div>
        <div class="det">
          <div class="zp">
            <p>照片</p>
            <div>
              <img :src="icon" id="img" /><br />
              <div>上传图片 <input type="file" id="input" /></div>
            </div>
          </div>
          <div class="nc">
            <p>用户名</p>
            <div>
              <input type="text" v-model="uname" maxlength="8" />
            </div>
          </div>
          <div class="nc">
            <p>性别</p>
            <div class="xb">
              <input type="radio" name="sex" v-model="sex" value="1" /><span>
                先生</span
              >
              &nbsp;&nbsp;&nbsp;
              <input type="radio" name="sex" value="0" v-model="sex" /><span>
                女士</span
              >
            </div>
          </div>
          <div class="nc">
            <p>电话号码</p>
            <div>
              <input type="text" v-model="phone" />
            </div>
          </div>
        </div>
        <button @click="tijiao">保存更改</button>
      </div>
      <div v-else>
        <div class="gr">
          <img src="../assets/gr.png" alt="" />
          <span>修改密码</span>
        </div>
        <div class="det">
          <div class="nc">
            <p>原密码</p>
            <div>
              <input type="password" v-model="oldupwd" maxlength="8" />
            </div>
          </div>
          <div class="nc">
            <p>密码</p>
            <div>
              <input type="password" v-model="upwd" maxlength="8" />
            </div>
          </div>
          <div class="nc">
            <p>再输入一次密码</p>
            <div>
              <input type="password" v-model="rupwd" maxlength="8" />
            </div>
          </div>
        </div>
        <button @click="change">保存更改</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      person: {},
      uname: "",
      phone: "",
      sex: "",
      icon: "",
      active: true,
      upwd: "",
      rupwd: "",
      oldupwd: "",
    };
  },
  computed: {
    ...mapState(["uid"]),
  },

  methods: {
    zl() {
      this.active = true;
    },
    xg() {
      this.active = false;
    },
    // 修改密码
    change() {
      if (this.upwd == "" || this.oldupwd == "" || this.rupwd == "") {
        this.$alert("输入不能为空", "密码修改", {
          callback: () => {
            this.$message({
              type: "info",
              message: `您已取消`,
            });
          },
        });
      } else if (this.upwd == this.rupwd) {
        // this.$alert("正确");
        this.axios
          .post(
            "/users/changepwd",
            `uid=${this.uid}&oldupwd=${this.oldupwd}&upwd=${this.upwd}`
          )
          .then((res) => {
            this.$alert(res.data.msg, "密码修改", {
              callback: () => {
                this.$message({
                  type: "info",
                  message: `您已取消`,
                });
              },
            });
          });
      } else {
        this.$alert("密码不一致", "密码修改", {
          callback: () => {
            this.$message({
              type: "info",
              message: `您已取消`,
            });
          },
        });
      }
    },
    // 个人资料提交
    tijiao() {
      // console.log(this.phone);
      var input = document.querySelector("#input");
      var file = input.files[0];
      console.log(file);
      let fd = new FormData();
      fd.append("uploadFile", file);
      fd.append("uid", this.uid);
      fd.append("sex", this.sex);
      fd.append("phone", this.phone);
      fd.append("uname", this.uname);
      this.axios.post("/users/upload", fd).then((res) => {
        // console.log(res);
        this.jiazai();
        this.$alert("修改成功", "用户模块", {});
      });
    },
    jiazai() {
      this.axios.get(`/users/user?uid=${this.uid}`).then((res) => {
        // console.log(res.data[0]);
        // this.person=res.data[0]
        this.icon = res.data[0].icon;
        this.uname = res.data[0].uname;
        this.phone = res.data[0].phone;
        this.sex = res.data[0].sex;
      });
    },
    toux() {
      var input = document.querySelector("#input");
      input.addEventListener("change", () => {
        // console.log(this.files[0]);
        var file = input.files[0];
        var ftype = file.name.substring(file.name.lastIndexOf(".") + 1);
        if (
          ftype == "jpg" ||
          ftype == "png" ||
          ftype == "jpeg" ||
          ftype == "JPG"
        ) {
          //限制大小，照片大小不能超过1M
          var size = file.size / 1024 / 1024;
          if (size > 1) {
            alert("头像不能大于1M");
            return false;
          }
          var reader = new FileReader();
          // 读取文件的路径，没有返回值,结果在reader.result里
          reader.readAsDataURL(file);
          //   this.icon = reader.result;
          //   console.log();
          // 读取需要时间，读完后再修改图片路径
          reader.onload = function () {
            //回显给上方图片中
            var img = document.getElementById("img");
            img.src = this.result;
          };
        }
      });
    },
  },
  mounted() {
    this.toux();
    this.jiazai();
  },
};
</script>































<style>
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
.user {
  height: 662px;
  width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  /* background-color: #eee; */
  margin-top: 100px;
}
.user .left {
  float: left;
  width: 318px;
  height: 420px;
  padding: 20px 0 20px;
  border: 1px solid #e8e8e8;
}
.user .left > div {
  font-size: 16px;
  color: #333;
  padding: 15px;
}
.user .left .tou {
  width: 288px;
  height: 70px;
  border-bottom: 1px solid #e8e8e8;
}
.user .left .tou .img {
  float: left;
  width: 70px;
  height: 70px;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  text-align: center;
  overflow: hidden;
}
.user .left .tou .img img {
  width: 70px;
}
.user .left .tou div:nth-child(2) {
  float: left;
  height: 70px;
  line-height: 70px;
  margin-left: 20px;
}
.user .left .pers {
  width: 288px;
  height: 21px;
  padding: 15px 15px 15px 15px;
  border-bottom: 1px solid#e8e8e8;
  cursor: pointer;
}
.user .left .pers span {
  font-weight: 700;
  margin-left: 20px;
  vertical-align: middle;
}
.user .left .pers .gr {
  float: left;
}
.user .left .pers::after {
  content: "";
  float: right;
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid#646262;
  border-right: 2px solid #646262;
  transform: rotate(45deg);
  margin-top: 3px;
}
.user .right {
  float: left;
  width: 847px;
  height: 460px;
  /* padding-bottom: 40px; */
  border: 1px solid #e8e8e8;
  margin-left: 30px;
}
.user .right .gr {
  width: 818px;
  height: 21px;
  padding: 22px 15px 15px 15px;
  border-bottom: 1px solid #e8e8e8;
}
.user .right .gr span {
  font-weight: 700;
  margin-left: 20px;
  vertical-align: middle;
}
.user .right .det {
  width: 818px;
  height: 325px;
  /* margin-bottom: 15px; */
  border-bottom: 1px solid #e8e8e8;
  padding: 20px 15px 15px 15px;
}
.user .right .det .zp {
  height: 103px;
}
.user .right .det .zp p {
  width: 280px;
  float: left;
  font-size: 14px;
}
.user .right .det .zp > div {
  height: 103px;
  float: left;
  position: relative;
}
.user .right .det .zp > div img {
  width: 70px;
  height: 70px;
  border: 1px solid #e8e8e8;

  border-radius: 10px;
  text-align: center;
}

.user .right .det .zp > div input {
  /* display: none; */
  /* visibility: hidden; */
  opacity: 0;
  position: absolute;
  top: 80px;
  left: -76px;
  cursor: pointer;
}

.user .right .det .zp > div > div {
  width: 80px;
  height: 20px;
  font-size: 13px;
  border: 1px solid #e8e8e8;
  margin-top: 10px;
  color: #888484;
  text-align: center;
  line-height: 20px;
}
.user .right .det .nc {
  height: 40px;
  margin-top: 30px;
}
.user .right .det .nc p {
  width: 280px;
  float: left;
  font-size: 14px;
  line-height: 40px;
}
.user .right .det .nc > div {
  float: left;
  line-height: 40px;
}
.user .right .det .nc > div input {
  width: 473px;
  height: 28px;
  outline: none;
  border: 1px solid #e8e8e8;
}
.user .right .det .nc .xb input {
  width: 20px;
  /* line-height: 40px; */
  vertical-align: middle;
}
.user .right button {
  height: 30px;
  font-size: 14px;
  margin: 5px 0 0 15px;
  background-color: #000;
  color: #fff;
  border: 0;
}
</style>